<template>
	<ve-dialog
		width="450px"
		:title="title"
		:show.sync="isShow"
		:show-close="true"
	>
		<el-form
			v-loading="isLoading"
			label-width="120px"
			label-suffix="："
			:model="formData"
			:rules="rules"
			ref="form"
		>
			<el-form-item label="课件上传人" prop="teacherId">
				<el-select
					style="width:100%"
					v-model="formData.teacherId"
					placeholder="请输入课件上传人姓名"
					:filterable="true"
					:remote="true"
					:remote-method="remoteMethod"
					:loading="loadingSearch"
				>
					<el-option
						v-for="item in accountOptions"
						:key="item.userId"
						:label="item.userName + ' - ' + item.schoolName"
						:value="item.userId"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="保利威邮箱" prop="uploadUserEmail">
				<el-input v-model="formData.uploadUserEmail" placeholder="请输入保利威账号中邮箱信息" />
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="isShow = false">取 消</el-button>
			<el-button type="primary" :loading="isLoading" @click="onSubmit">确 定</el-button>
		</template>
	</ve-dialog>
</template>

<script>
	import ucApi from "@rc/apis/uc/index.mjs";
	import systemApi from "@rc/apis/rc/system.mjs";

	export default {
		props: {
			// 是否显示弹窗,可通过.sync进行绑定
			visibly: {
				type: Boolean,
				default: false
			},
			// 账号标识，存在即为编辑账号
			id: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				isShow: this.visibly, // 内部的是否显示弹窗
				isLoading: false, // 加载或提交状态
				loadingSearch: false, // 搜索加载状态
				accountOptions: [], // 当前账号下拉列表
				formData: {
					teacherId: "", // 上传人id
					uploadUserEmail: "" //邮箱
				},
				rules: {
					teacherId: [{ required: true, message: "请选择上传人", trigger: "change" }],
					uploadUserEmail: [
						{ required: true, message: "请输入保利威邮箱", trigger: "blur" },
						{ type: "email", message: "请输入正确的邮箱格式", trigger: "blur" }
					]
				}
			};
		},
		computed: {
			title() {
				return this.id ? "修改课件上传账号" : "添加课件上传账号";
			}
		},
		watch: {
			// 内部和外部的变量双向绑定
			isShow(val) {
				this.$emit("update:visibly", val);
				this.$emit("show-change", val);
			},
			visibly(val) {
				this.isShow = val;
			}
		},
		methods: {
			// 员工远程检索
			remoteMethod(query) {
				return new Promise((rs) => {
					if (query !== "") {
						this.loadingSearch = true;
						ucApi.queryUserList({
							data: { userName: query, eeWorkstatus: "O" },
							success: ({ data }) => {
								this.loadingSearch = false;
								this.accountOptions = data;
								rs(data);
							}
						});
					} else {
						this.accountOptions = [];
					}
				});
			},
			// 提交表单
			onSubmit() {
				this.$refs.form.validate((isValid) => {
					if (!isValid) {
						return false;
					}
					const params = JSON.parse(JSON.stringify(this.formData));
					params.teacherName = this.accountOptions.find((i) => i.userId === params.teacherId).userName;
					const findItem = this.accountOptions.find((i) => i.userId === params.teacherId);
					params.teacherName = findItem ? findItem.userName : "";
					this.isLoading = true;
					systemApi[this.id ? "editUploadAccount" : "addUploadAccount"]({
						data: { ...params, relationId: this.id },
						success: () => {
							this.$message.success("操作成功");
							this.isShow = false;
							this.$emit("success");
						},
						complete: () => {
							this.isLoading = false;
						}
					});
				});
			}
		},
		created() {
			// 存在id，为编辑账号,查询详情，初始化数据
			if (this.id) {
				this.isLoading = true;
				systemApi.queryUploadAccountInfo({
					data: {
						relationId: this.id
					},
					success: async (data) => {
						await this.remoteMethod(data.teacherName);
						this.formData.teacherId = data.teacherId;
						this.formData.uploadUserEmail = data.uploadUserEmail;
						this.isLoading = false;
					}
				});
			}
		}
	};
</script>
